import React, {useState} from 'react'
import { useAuth } from "../context/AuthProvider";
import { login } from "../api/user";
import { message,Button, Form, Input } from 'antd';
import { Link } from 'react-router-dom';

const Login = () => {
    const { setUser } = useAuth();
    const [loading, setLoading] = useState(false)
    const onFinish = (values) => {
        setLoading(true)
        login(values)
            .then(res => {
                if (res.code == 200) {
                    message.success('登录成功')
                    setUser(res.data)
                }
            })
            .finally(()=>{
                setLoading(false);
            })
    }
    return <div>
        <Form
            name="basic"
            layout='vertical'
            style={{
                maxWidth: 400,
                margin: '50px auto'
            }}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="userName"
                rules={[
                    {
                        required: true,
                        message: 'Please input your username!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                hasFeedback
                rules={[
                    {
                        required: true,
                        message: 'Please input your password!',
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item>
                <Button block shape='round' loading={loading} type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>
            <Link to="/register">没有账号？去注册</Link>
        </Form>
    </div>
}

export default Login;